<template>
  <uv-popup ref="popup" bg-color="transparent" round="16rpx" zIndex="999">
    <view class="boxs p-t-32 p-x-20 p-b-46">
      <view class="text-center text-34 text-1E1E1E">规格详情</view>
      <view class="flex m-t-26 p-x-26 p-y-20 box-title">
        <view class="flex-4 font-28">
          名称
        </view>
        <view class="flex-1 font-28">
          数量
        </view>
        <view class="flex-1 font-28">
          合计
        </view>
      </view>
      <view class="box-content">
        <view class="flex p-x-26 m-t-24">
          <view class="flex-3 font-28">
            {{ line.product_name }}({{ line.suk }})
          </view>
          <view class="flex-1 font-26 text-center text-greey">
            {{ line.number }}
          </view>
          <view class="flex-1 font-26 text-greey">
            ￥{{ line.price / 100 }}
          </view>
        </view>
        <view class="flex p-x-26 m-t-24" v-for="(item, index) in material" :key="index">
          <view class="flex-3 font-28">
            {{ item.product_name }}
          </view>
          <view class="flex-1 font-26 text-center text-greey">
            {{ item.number }}
          </view>
          <view class="flex-1 font-26 text-greey">
            ￥{{ (item.price * item.number) / 100 }}
          </view>
        </view>
      </view>
    </view>
    <view class="flex justify-center m-t-32" @click="close">
      <uv-image :src="ASSETSURL + 'bXX.png'" width="82rpx" height="82rpx"></uv-image>
    </view>
  </uv-popup>
</template>
<script setup>
import { getDiyProductInfo } from '@/api/api';
import { ref } from 'vue';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
const material = ref([]);
const line = ref({});
const popup = ref(null);
const diyProductInfo = ref([]);
const emit = defineEmits(['close']);
const open = (e) => {
  console.log(e, '============');
  material.value = e.material || e.suk.materials;
  line.value = e.line || e.suk.line;
  // getDiyProductInfo({ product_id: e.id }).then((res) => {
  //   if (res.code == 1) {
  //     diyProductInfo.value = res.data;
  popup.value.open();
  //   }
  // });
};
const sure = () => {
  popup.value.close();
  uni.navigateTo({
    url: '/pagesA/pages/myDesign/myDesign'
  });
}
const close = () => {
  popup.value.close();
  emit('close');
}
// 暴露方法给父组件
defineExpose({
  open
});
</script>

<style scoped>
.boxs {
  width: 580rpx;
  /* height: 736rpx; */
  border-radius: 16rpx;
  background-color: #fff;
  z-index: 999;
}

.box-title {
  height: 82rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  background-color: #EFEFEF;
}

.box-content {
  height: 379rpx;
  overflow-y: auto;
}
</style>
